<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>我的活动</title>
    <link rel="stylesheet" href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}">
    <link rel="apple-touch-icon-precomposed" href="../static/images/icon/icon.png"
          th:href="@{/images/icon/icon.png}">
    <link rel="shortcut icon" href="../static/images/icon/favicon.ico" th:href="@{/images/icon/favicon.ico}">
    <link rel="stylesheet" href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/style.css" th:href="@{/css/style.css}">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">

    <style>
        tr td {
            max-width: 800px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .cc {
            max-width: 110px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    </style>
</head>
<body>
<div style="margin-top: -50px;">
    <div class="row" th:replace="_fragments :: menu(0)"></div>
</div>

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-lg-10 col-md-offset-2 main" id="main"
     style="margin-left: 100px;!important;">
    <div class="table-responsive">
        <table class="table table-striped table-hover" style="margin-bottom: 20px;!important;">
            <thead>
            <tr style="display: block">
                <th style="width: 170px!important;"><span class="visible-lg">标题</span></th>
                <th style="width: 900px!important;"><span class="visible-lg">内容</span></th>
                <th style="width: 120px!important;"><span class="visible-lg">活动类型</span></th>
            </tr>
            </thead>
            <tbody class="table-striped">
            <div th:each="act : ${my_activity}">
                <tr style="display: block">
                    <td onclick="detail(this.id)" th:id="${act.id}" style="width: 170px;" class="cc"
                        th:text="${act.title}">
                        春天一日游
                    </td>
                    <td onclick="detail(this.id)" th:id="${act.id}" th:text="${act.content}">
                        春天来了！你看万紫千红的花开了，把可爱的草，树木，鸟，兽，虫，鱼都从寒冷的冬天中叫醒了，使得大地恢复了生机。那些野花像小星星一样一闪一闪眨着眼睛。各式各样的野花也睡醒了，只见它们</p>
                    </td>
                    <td onclick="detail(this.id)" th:id="${act.id}" style="width: 120px" class="cc"
                        th:text="${act.type.name}">hhh
                    </td>
                </tr>
                <tr style="display: block;height: 30px;">
                    <td class="hidden-sm" style="width: 170px"></td>
                    <td class="hidden-sm" style="width: 800px">
                    </td>
                </tr>
            </div>
        </table>

    </div>
</div>

<th:block th:replace="_fragments :: script">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
</th:block>

<script>

    function detail(id) {
        var form = $("<form>");
        form.attr('method', 'post');
        var href = "/activity/activities/" + id;
        form.attr('action', href);
        $('body').append(form);
        form.submit();
        console.log("id=" + id);
        // window.location.href = "/activity/activities/" + id;
    }

</script>
</body>
</html>